<template>
  <el-card>
    <div class="page">
      <h3 class="applyRecode">强制下架商品</h3>
      <el-form class="form" :model="form" ref="form" label-width="100px">
        <el-form-item size="small" label="商品名称/ID：">
          <el-input placeholder="" v-model="form.name"></el-input>
        </el-form-item>
        <!-- <el-form-item size="small" label="助理人/电话：">
          <el-input placeholder="" v-model="form.phone"></el-input>
        </el-form-item> -->
        <el-form-item size="small" label="分类：">
          <el-input placeholder="" v-model="form.kind"></el-input>
        </el-form-item>
        <div><el-button type="primary" @click="findInit" size="small">查询</el-button></div>
      </el-form>
      <div><el-button type="primary" size="small" @click = "exportList(9)">导出列表</el-button></div>
      <el-table class="tables" :data="tableData">
        <el-table-column prop="goodsProduceId" label="产品ID" align="center"></el-table-column>
        <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="goodsClassName" label="分类" align="center"></el-table-column>
        <el-table-column prop="goodsStorage" label="库存" align="center" width = "250px"></el-table-column>
        <el-table-column prop="goodsSaleNum" label="销量" align="center" width="90px"></el-table-column>
        <el-table-column label="产品价格" align="center">
          <template slot-scope="scope">
            <span class="span">{{ scope.row.goodsBuyPoint }} 积分</span>+<span class="span">{{ scope.row.goodsBuyPrice }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsSender" label="发货方" align="center" width="90px"></el-table-column>
        <el-table-column prop="goodsStatus" label="商品状态" align="center" width="130px">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsStatus == 0">待提审</span>
            <span v-else-if="scope.row.goodsStatus == 1">待审核</span>
            <span v-else-if="scope.row.goodsStatus == 2">待上架</span>
            <span v-else-if="scope.row.goodsStatus == 3">已上架</span>
            <span v-else-if="scope.row.goodsStatus == 4">已下架</span>
            <span v-else-if="scope.row.goodsStatus == 5">已售罄</span>
            <span v-else-if="scope.row.goodsStatus == 6">删除</span>
            <span v-else-if="scope.row.goodsStatus == 7">下架待提审</span>
            <span v-else-if="scope.row.goodsStatus == 8">审核拒绝待提审</span>
            <span v-else-if="scope.row.goodsStatus == 9">违规（禁售）</span>
            <span v-else-if="scope.row.goodsStatus == 10">停售</span>
            <span v-else-if="scope.row.goodsStatus == 11">查封</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="look(1, scope.row)" size="small">查看</el-button>
            <el-button type="text" @click="xeditor(2,scope.row)" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination background style="float:right;margin:26px 0 30px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'stay',
  data () {
    return {
      currentPage: 1,
      pagesize: 10,
      total: 0,
      form: {
        name: '',
        kind: ''
      },
      tableData: []
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.$tkAjax.post(`${this.$config.baseUrl}/goods/search/page`, {
        searchType: '9',
        goodsNameOrId: this.form.name,
        className: this.form.kind,
        merchantId: this.$store.state.merchantId,
        page: this.currentPage,
        size: this.pagesize
      }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        // console.log(res)
        this.tableData = res.data.content.goods
        this.total = res.data.content.total
      }).catch(err => {
        this.$message.warning(err.data.message)
      })
    },
    //查看
    look (num, row) {
      this.$router.push({
        path: '/matter',
        query: {
          godid: row.goodsCommonId,
          disabled: 'true',
          flook: num
        }
      })
    },
    //编辑跳转
    xeditor (num, row) {
      this.$router.push({
        path: '/matter',
        query: {
          godid: row.goodsCommonId,
          ban: num
        }
      })
    },
    findInit () {
      this.currentPage = 1
      this.init()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.init()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  .form {
    display: flex;
    .el-form-item:nth-child(2){
      margin-left: 28px;
    }
    .el-button {
      border-radius: 4px;
      margin-left: 56px;
    }
  }
  .tables {
    .el-table__body-wrapper .el-table__body .span {
      margin-right: 15px;
    }
  }
}
</style>
